<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <el-row
        style="margin: 5px 0px"
        type="flex"
        justify="space-around">
        <el-col :span="12">
          <span style="margin-right: 20px;">
            产品编号：{{ product_no }}
          </span>
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-s-promotion"
            @click="handleTransferAction">
            在线调用
          </el-button>
        </el-col>
        <el-col
          :span="12"
          style="text-align: right"></el-col>
      </el-row>
      <table-list
        ref="tableList"
        :fields="tableDataColumn"
        :pagination="true"
        :searchFunc="onlineTimeGetList"
        :searchDefault="searchConditions"
        border>
      </table-list>
    </el-card>
  </div>
</template>
<script>
import OnlineTransfer from '@/views/product/operator/online/onlineTransfer';
import Detail from '@/views/product/operator/online/detail';
import { onlineTimeGetList } from '@/api/product';
import TableList from '@/components/TableList/index'
export default {
  name:"list",
  components:{
    TableList
  },
  props: {
    product_no: {
      type: [String, Number],
      default: '',
    },
  },
  data(){
    return {
      onlineTimeGetList,
      tableDataColumn:[
        {
          prop: 'phone',
          searchName:"phone",
          label: '号码',
          minWidth: '120',
          searchType:'input'
        },
        {
          prop: 'phone_type',
          searchName:"phone_type",
          label: '运营商',
          options:[
            {
              value: 'CMCC',
              label: '移动',
            },
            {
              value: 'CUCC',
              label: '联通',
            },
            {
              value: 'CTCC',
              label: '电信',
            },
            {
              value: "",
              label: '无',
            }
          ],
          minWidth: '120',
          searchType:'select'
        },
        {
          prop: 'status',
          searchName:"status",
          label: '状态',
          options:[
            {
                value: 100,
                label: '成功',
                color: '#67C23A'
              },
              {
                value: 0,
                label: '失败',
                color: '#F56C6C'
              }
          ],
          minWidth: '120',
          searchType:'select'
        },
        {
          prop: 'message',
          searchName:"message",
          label: '描述',
          minWidth: '120',
        },
        {
          prop: 'is_charge',
          searchName:"is_charge",
          label: '收费',
          searchType: 'select',
          options:[
            {
                value: 1,
                label: '扣费',
                color: '#67C23A'
              },
              {
                value: 0,
                label: '不扣费',
                color: '#F56C6C'
              }
          ],
          minWidth: '120'
        },
        {
          prop: 'user.nick_name',
          label: '用户',
          minWidth: '120'
        },
        {
          prop: 'created_at',
          searchName:"created_at",
          label: '创建时间',
          minWidth: '180',
          searchType: 'dateTime',
        },
        {
          label: '操作',
          searchField: false,
          render: (h, scope) => {
            return (
              <div>
                <el-button
                  size='mini'
                  type='text'
                  onClick={() => {
                    this.showDetailAction(scope.row);
                  }}>
                  查看
                </el-button>
              </div>
            );
          },
          fixed: 'right',
          minWidth: '160',
        },
      ]
    }
  },
  computed:{
    searchConditions(){
      return {
        user_id: this.$store.state.user.info.id,
        product_no: this.product_no
      }
    }
  },
  methods:{
    handleTransferAction(){
      this.showTransferAction()
    },
    showTransferAction(){
      this.$createDialog({
        title: '在线调用',
        component: OnlineTransfer,
        width:"40%",
        props: {
          productNo: this.product_no,
        },
        buttons: [{ text: '提交', callback: 'handleSubmit', name: 'submit' }],
      });
    },
    showDetailAction(row){
      this.$createDialog({
        title: '详情',
        component: Detail,
        width:"40%",
        props: {
          formData: row,
        },
        buttons: [{ text: '关闭', callback: 'handleSubmit', name: 'submit' }],
      });
    }
  }
}
</script>